<template>
  <view class="list shadow">
      <view class="flex justify-between items-center">
        <text :style="{ 'margin-top': '33rpx', 'margin-left': '40rpx', 'font-size': '30rpx', 'color': textColor || '#506159' }">{{ text }}</text>
        <view class="flex items-center">
          <text v-if="secondaryText" class="second text-gray" style="margin-top: 38rpx; margin-right: 40rpx;">{{ secondaryText }}</text>
          <view v-if="icon" style="margin-top: 33rpx; margin-right: 30rpx;">
			<uni-icons :type="icon" size="24" color='#CCCCCC'/>
		  </view>
        </view>
      </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

export interface listItemType {
	text: string;
	secondaryText?: string;
	icon?: string;
	textColor?:string
}

// 使用已定义的接口作为泛型参数
defineProps<listItemType>();
</script>

<style lang="scss">
.list{
	border-radius: 30rpx;
	width: 656rpx;
	height: 110rpx;
	margin-left: 44rpx; 
	margin-top: 30rpx;
	background-color: #fff;
}
/* 移除了.secondtab类，因为secondaryText现在在右侧容器中 */
.second {
	font-size: 26rpx;
}
</style>